<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>发起申请</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;line-height: 50px;text-align: center;color:#2bb1ff;font-size: 14px; }
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.p-list1{position:relative;display:block;padding:0 18px;margin:10px 0;height:50px;font-size: 14px;}
.p-list1 .left{position: absolute; width: 100px; left:18px;top:0;height: 100%;line-height:50px;}
.p-list1 .right{display:block;padding-left: 100px; width:100%;height:100%;line-height:50px;font-size: 14px; text-align: right;}
/**/
.p-list2{ width: 100%; height: auto; margin:10px 0; background: #fff; }
.p-list2 p{ padding-left:18px; height: 37px; line-height: 37px; font-size: 15px;}
.p-list2 textarea{width: 100%; padding:0 18px; font-size: 15px; font-family: inherit; }
.add-img{  padding-left:18px; padding-bottom: 5px; }
.add-img img{  width: 45px; height: 45px ;}
.add-img span{display: inline-block; margin-right: 5px; width: 45px; height: 45px ; background-repeat:no-repeat; background-size:cover; }
/*请假*/
.p-list1.qingjia{ margin:0; border-bottom: 1px solid #eee;background-color:#fff;}
p.color2{height:25px;line-height:25px; padding-left:18px; font-size:13px; background: #fff; }
/*请假理由，审批人*/
.p-list2 ul{ padding:0 18px 15px 18px;}
.p-list2 li{position: relative; display: inline-block; width: 55px; height: 66px;  overflow: hidden;}
.p-list2 li span{display: block;padding-top: 3px; font-size: 12px; width: 100%;text-align: center; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; color: #767676;}
.p-list2 li img{  display: block;  width: 45px; height: 45px; margin:0 auto; }
.p-list2 .p-btn{ width: 45px; margin-left: 5px;}
/*提醒开关*/
 .p-list1 .tixing{margin-top: 16px;padding:1px;  height: 18px; width: 35px; border-radius:9px;  background: #ccc; } 
 .tixing span{ float:left; height: 16px;width: 16px;  border-radius:50%; background: #fff; } 
 .p-list1 .t-on{ background: #16a4ff; } 
 .p-list1 .t-on span{ float:right; } 

/*底部信息*/
.botm{  margin: 20px 0;}
.botm a{  display: block; width: 90%; line-height: 45px; margin:0 auto;border-radius: 3px; background: #2bb1ff; color:#fff; 
  text-align: center; font-size: 15px;}
/*辅助类*/
.g-left{padding-right:16px; background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{padding-right:16px; background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{padding-right:16px; background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }
/*标记*/
.p-close{ position: absolute;top:0;right: 0; width:15px;height:15px;
  background: url(../img/xx_03.png) no-repeat ; background-size:15px;}
.p-biaoji{ background:#fff url(../img/bx_03.png) 10px center no-repeat; background-size:9px; }
/*模态框*/
.mo{display: none; position: absolute; top:0; left: 0; z-index: 188;width: 100%;height: 100%;background: rgba(0,0,0,0.5); }
.mo ul{ width:200px;max-height:350px;padding:13px 0; margin:100px auto; border-radius: 5px; background:#fff;overflow: auto;}
.mo a{ display: block; padding-left: 75px; width: 100%; height: 35px;line-height: 35px; font-size: 16px; color: inherit; background: url(../img/qx_03.png) 30px center no-repeat;background-size:20px;}
.mo .active{ background-image: url(../img/xz_03.png);background-size:20px;}

/*日历组件样式更改*/
#layui-laydate1{ width: 100%;left:0 !important; }
#layui-laydate2{ width: 100%;left:0 !important; }
.layui-laydate-main{width: 100% !important;}
table{width:100%}
ol{ overflow-y: auto !important; }
</style>
</head>
<body>
<div class="page-container">
    <div class="weui-tab">
           <!-- 头部 -->
            <div class="weui-navbar page-top">
                    <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                    <span class="t-title" id="jia-select-head">请假申请</span>  
                    <a  class="g-other" id="jia-select1">选择</a>
            </div>
            <!-- 内容区 -->
            <div class="weui-tab__bd page-wrap" >  
       
                <a class="p-list1 p-biaoji">
                    <span class="left">请假类型</span>
                    <span class="right color2 g-up" id="jia-select2">请选择</span>
                </a>

                <a class="p-list1 qingjia p-biaoji">
                    <span class="left">请假人</span>
                    <input class="right" type="text" placeholder="请输入" id="user">
                </a>
                <a class="p-list1 qingjia p-biaoji">
                    <span class="left">开始时间</span>
                    <input class="right" type="text" id="time1" onfocus="this.blur();">
                </a>
                <a class="p-list1 qingjia p-biaoji">
                    <span class="left">结束时间</span>
                    <input class="right" type="text" id="time2" onfocus="this.blur();"
                    onclick="if( !bool){ $.alert('请先选择开始时间'); return false; }">
                </a>
                <a class="p-list1 qingjia">
                    <span class="left">请假时长</span>
                    <span class="right" id="timeNum"></span>
                </a>
                <p class="color2">时长将自动进入考勤系统</p>

                <div class="p-list2">
                      <p>请假理由</p>
                      <textarea name=""  cols="30" rows="6" placeholder="请输入请假理由..." id="text"></textarea>
                </div>

                <div class="p-list2">
                      <p>图片上传</p>
                      <div class="add-img">
                            <input type="file" id="file" style="display: none;" multiple="multiple">
                            <img id="tu-add" src="../img/tadd_03.png" alt="添加图片" onclick="file.click()">
                      </div>
                      
                </div>

                <div class="p-list2">
                      <p class="p-biaoji">审批人 <span>审批通过后, 通知抄送人</span></p>
                      <ul>
                            <li><img src="../img/t1.png" ><span>程交金</span><i class="p-close"></i></li>
                            <li><img src="../img/t5.png" ><span>文慈</span><i class="p-close"></i></li>
                            <li class="p-btn">
                                  <a href="../tongxunlu/index.html"><img src="../img/add_06.png" ></a>
                            </li>
  <!--                           <li class="p-btn">
                                  <a ><img src="../img/jj_08.png" ></a>
                            </li> -->
                      </ul>
                </div>

                <div class="p-list2">
                      <p class="p-biaoji">抄送人 <span>审批通过后, 通知抄送人</span></p>
                      <ul>
                            <li><img src="../img/t1.png" ><span>程交金</span><i class="p-close"></i></li>
                            <li><img src="../img/t5.png" ><span>文慈</span><i class="p-close"></i></li>
                            <li class="p-btn">
                                  <a href="../tongxunlu/index.html"><img src="../img/add_06.png" ></a>
                            </li>
                        <!--     <li class="p-btn">
                                  <a ><img src="../img/jj_08.png" ></a>
                            </li> -->
                      </ul>
                </div>

                <div class="botm">
                        <a id="okBtn">提 &nbsp; &nbsp; &nbsp; &nbsp;交</a>
                        <!-- <a href="###" id="okBtn">提 &nbsp; &nbsp; &nbsp; &nbsp;交</a> -->
                </div>
           </div>
    </div>
</div>

<!-- 模态框 -->
<div class="mo" id="gengduo" dtr="jia-select-head">
    <ul >
          <li><a class="active" href="###">请假申请</a></li>
          <li><a  href="###">用车申请</a></li>
          <li><a  href="###">会议室申请</a></li>
          <li><a  href="###">校产申请</a></li>
          <li><a  href="###">报修申请</a></li>
          <li><a  href="###">公文流转</a></li>
          <li><a  href="###">场地申请</a></li>
          <li><a  href="###">报餐申请</a></li>
    </ul>
</div>

<div class="mo" id="qingjia" dtr="jia-select2">
    <ul>
          <li><a class="active" href="###">事假</a></li>
          <li><a  href="###">病假</a></li>
          <li><a  href="###">调休</a></li>
          <li><a  href="###">产假</a></li>
          <li><a  href="###">婚假</a></li>
          <li><a  href="###">例假</a></li>
    </ul>
</div>
</body>
<script src="../js/laydate.js"></script>
<script>
// 时间日期控件
var bool = false;
var mintime="";
var times1 = 0;
var times2 = 0;
laydate.render({
      elem: '#time1',
      type: 'datetime', 
      format:"yyyy/MM/dd HH:mm",
      min:0,
      done:function(v,d,en){     
           bool = true;
           times1 = new Date(d.year, d.month-1, d.date, d.hours, d.minutes, d.seconds ).getTime() ;
           mintime = d.year+"-"+(d.month)+"-"+ d.date+" "+d.hours+":"+ d.minutes+":"+d.seconds;
           time2(mintime );
      }
});       
//d={year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
function time2(mintime ){  
laydate.render({
    elem: '#time2',
    type: 'datetime',
    format:"yyyy/MM/dd HH:mm",
    min: mintime,
    // min: "2018-08-18 16:30:2",
    done:function(v,d,en){
            times2 = new Date(d.year, d.month-1, d.date, d.hours, d.minutes, d.seconds ).getTime() ;
            var qTime = times2 - times1;
            if( qTime >=0){
                  $("#timeNum").text(  (qTime/3600000).toFixed(2) + "小时" );
            }else{
                  $.alert("请选择正确的时间区间");
            }           
             // console.log(times1)
             // console.log(times2)
    }
});
}

//"选择" 按钮
$("#jia-select1").click(function(){
    $("#gengduo").toggle();
    return false;
})

$("#jia-select2").click(function(){
    $("#qingjia").toggle();
    return false;
})
$(document).click(function(){
   $(".mo").hide();
})

$(".mo").find('a').click(function(){
    $(this).parent().parent().find("a").removeClass("active");
    $(this).addClass("active")
    // console.log($(this).attr("dtr") )
    $("#"+ $(this).parents('.mo').attr("dtr") ).text(this.innerHTML).removeClass("color2");
})


// 图片上传
$("#file").on("change",function(){
    var fileName = this.value;   
    if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {   
        alert('您上传的图片格式不正确，请重新选择！');   
        return false;   
    }   
    // console.log(this.files )
    // var file = this.files[0]; 
    for(var i=0; i<this.files.length; i++){
          var file = this.files[i];
          if (!!file) {  
                var img= document.createElement("span");    
                $(this).parent().prepend(img); 
                var myURL = window.URL || window.webkitURL;
                var url=myURL.createObjectURL(file);
                img.style.backgroundImage="url("+url+")";
                // img.src=myURL.createObjectURL(file);
                $(img).click(function(){ 
                       var t = this ;
                       $.confirm("是否删除图片", function() {
                              $(t).remove();
                              $("#file").val('');
                        }, function() {
                              //点击取消后的回调函数
                        }); 
                 })
          }
    } 
})

//删除选人
$(".p-close").click(function(){
   $(this).parent().remove();
})

//提交按钮
// var title,type,user,time1,time2,times,text,img,sp,cs;
var obj = {};
$("#okBtn").click(function(){ 
   obj.href = "../otherpages/qingjia.html";
   obj.title = $("#jia-select-head").text();

   if( $("#jia-select2").text() == "请选择"  ){ alert("请选择请假类型!"); return; }
   obj.type = $("#jia-select2").text();

   if( !$("#user").val() ){ alert("请选输入姓名!"); return; }
   obj.user = $("#user").val();

   if( !$("#time1").val() ){ alert("请选择开始时间!"); return; }
   obj.time1 = $("#time1").val();

   if( !$("#time2").val() ){ alert("请选择结束时间!"); return; }
   obj.time2 = $("#time2").val();
   obj.times= $("#timeNum").text();
 
   obj.text = $("#user").val() +$("#jia-select2").text()+"申请: " +$("#text").val();

   var myD = new Date();
   obj.time = myD.getFullYear()+"/"+(myD.getMonth()+1)+"/"+myD.getDate()+" "+myD.getHours()+":"+myD.getMinutes();
  
    var arr2 = [obj];

    var datas = sessionStorage.data;

    if( !!datas){
         var arr =$.parseJSON(datas);
         arr.push(obj);
         sessionStorage.data = JSON.stringify( arr );
    }else{
         sessionStorage.data = JSON.stringify( arr2 );
    }
    // console.log( sessionStorage.data  )
    this.href="../../index.html" ; 
})

</script>
</html>